@{
    ViewData["Title"] = "按钮颜色测试";
    Layout = "_Layout";
}

<div class="layui-container-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>按钮颜色和样式测试</h3>
                </div>
                <div class="layui-card-body">
                    <h4>Layui默认按钮样式</h4>
                    <div class="layui-btn-container" style="margin-bottom: 20px;">
                        <button class="layui-btn">默认按钮</button>
                        <button class="layui-btn layui-btn-primary">主要按钮</button>
                        <button class="layui-btn layui-btn-normal">正常按钮</button>
                        <button class="layui-btn layui-btn-warm">暖色按钮</button>
                        <button class="layui-btn layui-btn-danger">危险按钮</button>
                    </div>

                    <h4>按钮尺寸测试</h4>
                    <div class="layui-btn-container" style="margin-bottom: 20px;">
                        <button class="layui-btn layui-btn-xs">超小按钮</button>
                        <button class="layui-btn layui-btn-sm">小按钮</button>
                        <button class="layui-btn">默认按钮</button>
                        <button class="layui-btn layui-btn-lg">大按钮</button>
                    </div>

                    <h4>Knowledge页面按钮</h4>
                    <div class="layui-btn-container" style="margin-bottom: 20px;">
                        <button type="button" class="layui-btn layui-btn-normal" id="uploadButton">
                            <i class="fas fa-upload"></i> 上传文档
                        </button>
                        <button type="button" class="layui-btn layui-btn-warm" id="refreshButton">
                            <i class="fas fa-refresh"></i> 刷新
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" id="addTestDataButton">
                            <i class="fas fa-plus"></i> 添加测试数据
                        </button>
                    </div>

                    <h4>搜索按钮</h4>
                    <div class="layui-row layui-col-space10" style="margin-bottom: 20px;">
                        <div class="layui-col-md8">
                            <input type="text" class="layui-input" id="searchInput" placeholder="搜索文档...">
                        </div>
                        <div class="layui-col-md4">
                            <button class="layui-btn layui-btn-primary" type="button" id="searchButton">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </div>

                    <h4>表格操作按钮</h4>
                    <div class="layui-btn-container" style="margin-bottom: 20px;">
                        <button class="layui-btn layui-btn-xs" onclick="testClick('view')">查看</button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="testClick('delete')">删除</button>
                    </div>

                    <h4>CSS加载状态检查</h4>
                    <div id="cssCheck" style="padding: 10px; background-color: #f8f8f8; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                        <p><strong>Layui CSS:</strong> <span id="layuiCssStatus">检查中...</span></p>
                        <p><strong>自定义CSS:</strong> <span id="customCssStatus">检查中...</span></p>
                        <p><strong>按钮样式优先级:</strong> <span id="cssPriority">检查中...</span></p>
                    </div>

                    <h4>测试结果</h4>
                    <div id="testResult" style="padding: 10px; background-color: #f0f8ff; border: 1px solid #b0d4f1; display: none;">
                        <p id="resultText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            console.log('按钮颜色测试页面加载完成');
            
            // 检查CSS加载状态
            checkCssStatus();
            
            // 绑定按钮事件
            bindButtonEvents();
        });

        function checkCssStatus() {
            // 检查Layui CSS
            const layuiCss = $('link[href*="layui"]');
            if (layuiCss.length > 0) {
                $('#layuiCssStatus').text('已加载').css('color', 'green');
                console.log('Layui CSS已加载');
            } else {
                $('#layuiCssStatus').text('未加载').css('color', 'red');
                console.error('Layui CSS未加载');
            }
            
            // 检查自定义CSS
            const customCss = $('link[href*="site.css"]');
            if (customCss.length > 0) {
                $('#customCssStatus').text('已加载').css('color', 'green');
                console.log('自定义CSS已加载');
            } else {
                $('#customCssStatus').text('未加载').css('color', 'red');
                console.error('自定义CSS未加载');
            }
            
            // 检查按钮样式
            const testButton = $('.layui-btn').first();
            if (testButton.length > 0) {
                const computedStyle = window.getComputedStyle(testButton[0]);
                const backgroundColor = computedStyle.backgroundColor;
                const color = computedStyle.color;
                
                $('#cssPriority').text('背景色: ' + backgroundColor + ', 文字色: ' + color);
                console.log('按钮样式:', {backgroundColor, color});
            }
        }

        function bindButtonEvents() {
            // 基础按钮测试
            $('.layui-btn').on('click', function() {
                const buttonText = $(this).text().trim();
                const buttonClass = $(this).attr('class');
                showResult('点击了按钮: ' + buttonText + '<br>类名: ' + buttonClass);
            });
        }

        function testClick(action) {
            showResult('表格操作按钮: ' + action);
        }

        function showResult(text) {
            $('#resultText').html(text);
            $('#testResult').show();
            
            setTimeout(function() {
                $('#testResult').hide();
            }, 3000);
        }
    </script>
} 